<template>
  <div class="swipe page">
    <div class="swiper-container" ref="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in arr" :key="index">
          <video class="video" :src="url" controls />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import {getMv} from '@/network/api'
export default {
  data() {
    return {
      arr: [1, 2, 3, 4],
      url: "",
    };
  },
  created() {
    this.$nextTick(() => {
      new Swiper(this.$refs.swiper, {
        loop: true, // 循环模式选项
        direction: "vertical",
      });
    });
    getMv().then((res) => {
      this.url = res.data.url;
    });
  },
  methods: {

  },
  watch:{}
};
</script>
 
<style lang = "scss" scoped>
.swiper-container {
  width: 100%;
  height: 100vh;
  background: #eee;
}
.swiper-slide{
  position: relative;
  background: #000;
  height: 100%;
}
.video{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;

}
</style>